<!-- 注册页面 -->
<template>
  <div class="bg">
    <div class="card">
      <el-card style="width: 480px">
        <div class="title">退役军人服务平台</div>
        <div class="text">为退役军人提供全方位服务支持</div>

        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          style="margin-top: 15px"
          :stretch="true"
        >
          <el-tab-pane label="用户注册" name="first"></el-tab-pane>
        </el-tabs>
        <el-input
          v-model="registerInfo.realName"
          style="width: 100%; margin: 8px 0"
          placeholder="请输入真实姓名"
          :prefix-icon="User"
        />
        <el-input
          v-model="registerInfo.identityCard"
          style="width: 100%; margin: 8px 0"
          placeholder="请输入身份证"
          :prefix-icon="CreditCard"
        />
        <el-input
          v-model="registerInfo.phone"
          style="width: 100%; margin: 8px 0"
          placeholder="请输入电话号码"
          :prefix-icon="Iphone"
        />
        <el-input
          v-model="registerInfo.password"
          style="width: 100%; margin: 8px 0"
          placeholder="请输入密码"
          :show-password="true"
          type="password"
          :prefix-icon="Lock"
        />
        <el-button type="primary" style="width: 100%; margin-top: 8px" @click="register"
          >注册</el-button
        >
        <div class="zhuce" @click="router.push('/login')">立即登录</div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { Lock, User,Iphone,CreditCard } from "@element-plus/icons-vue";
import {ElMessage} from 'element-plus'
import {userRegister} from '@/api/api'
const router = useRouter();
const activeName = ref("first");

const registerInfo=ref({
  realName:'',
  identityCard:'',
  phone:'',
  password:'',
})

const register=async ()=>{
 const res= await userRegister(registerInfo.value)
 if(res.code!==200){
    ElMessage.error(res.msg);
  }
  else{
    ElMessage.success('注册成功！请前往登录！');
    router.push("/login");
  }
}
</script>

<style scoped lang="scss">
.bg {
  background-image: url("../assets/loginBack.png");
  width: 100%;
  height: 100vh;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card {
}
.title {
  font-size: 24px;
  text-align: center;
  margin-bottom: 10px;
  color: red;
  font-weight: bold;
}
.text {
  color: #4b5563;
  text-align: center;
}
:deep(.el-tabs__item) {
  font-size: 16px;
}
.zhuce {
  font-size: 14px;
  color: red;
  margin-top: 8px;
  cursor: pointer;
}
</style>
